import React from 'react'
import CcOrderForm from './CcOrderForm';
import { Drawer, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import OrderLogs from './OrderLogs';
import RefundRecord from './refund/RefundRecord';
import { observer } from 'mobx-react-lite';
import CommentInfo from './CommentInfo';

const DetailDrawer = (props) => {
  const {
    handleUpdate,
    modal,
    orderId,
    onClose,
    visible,
  } = props;


  const tabItems = [
    {
      title: '订单信息',
      content: (
        <CcOrderForm
          modal={modal}
          orderId={orderId}
          onCancel={onClose}
          onSubmit={handleUpdate}
        />
      ),
    },
    {
      title: '分账记录',
      content: '分账记录',
    },
    {
      title: '订单历史变更记录',
      content: (
        <OrderLogs orderId={orderId} />
      ),
    },
    {
      title: '相关评论',
      content: (<CommentInfo orderId={orderId} />),
    },
    {
      title: '退款记录',
      content: (
        <RefundRecord orderId={orderId} modal={['refund']} />
      ),
    },
  ];

  return (
    <Drawer
      visible={visible}
      title={t`查看订单`}
      onClose={onClose}
      closeMode={['esc', 'mask', 'close']}
      style={{ maxWidth: '90%' }}
      width="90%"
    >
      <Tab>
        {tabItems.map((item, idx) => (
          <Tab.Item
            title={t`${item.title}`}
            key={`${idx}`}
          >
            {item.content}
          </Tab.Item>
        ))}
      </Tab>
    </Drawer>
  );
};

export default observer(DetailDrawer);
